{% extends 'base.html' %}

{% block title %}切换角色{% endblock %}

{% block content %}
    <div class="container mt-8 mb-8">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6">
                <!-- 卡片容器 -->
                <div class="card shadow-lg rounded-xl overflow-hidden border-0 transition-all duration-300 hover:shadow-xl">
                    <!-- 卡片头部 -->
                    <div class="card-header bg-gradient-to-r from-primary to-secondary text-blank py-4 px-6">
                        <h2 class="mb-0 h4 font-bold"><i class="bi bi-person-switch me-3"></i>选择要切换的角色</h2>
                    </div>
                    <!-- 卡片主体 -->
                    <div class="card-body p-6 bg-white">
                        <div class="table-responsive rounded-lg overflow-hidden border border-gray-200">
                            <table class="table table-hover mb-0">
                                <thead class="bg-gray-50 text-gray-700">
                                    <tr>
                                        <th class="py-3 px-4 font-medium">角色名称</th>
                                        <th class="py-3 px-4 font-medium">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for role in roles %}
                                    <tr class="border-t border-gray-100 hover:bg-gray-50 transition-colors duration-150">
                                        <td class="py-3 px-4 align-middle font-medium">{{ role }}</td>
                                        <td class="py-3 px-4 align-middle">
                                            <form action="{% url 'core:switch_role_submit' role.name %}" method="post" class="d-inline-block">
                                                {% csrf_token %}
                                                <button type="submit" class="btn btn-primary btn-sm px-4 py-2 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 bg-gradient-to-r from-primary to-primary-dark border-0"><i class="bi bi-person-badge me-2"></i>切换为{{ role }}身份</button>
                                            </form>
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="2" class="py-6 px-4 text-center text-gray-500">
                                            <div class="flex flex-col items-center justify-center space-y-2">
                                                <i class="bi bi-exclamation-circle text-2xl"></i>
                                                <span>没有可用角色</span>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- 卡片底部 -->
                    <div class="card-footer bg-gray-50 py-3 px-6 text-center text-gray-500 text-sm">
                        请选择您想要切换的角色身份
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}